<template>
  <div id="emailMg" style="height:100%">
    <ta-border-layout :layout="{header:'70px'}" :centerCfg="{showBar: true}">
      <ta-row slot="header" type="flex" justify="center" align="middle">
        <ta-input-search class="search-box" v-model="searchInfo" @search="loadData" placeholder="根据邮箱账号搜索"
                         enter-button="搜索"/>
      </ta-row>
      <div slot="centerExtraContent">
        <div style="float: left">
          <ta-button type="primary"  @click="fnEditEmail()">新增邮箱</ta-button>
          <ta-button type="primary" @click="fnToDeleteEmail">批量删除邮箱</ta-button>
        </div>
      </div>
      <div >
        <ta-table  rowKey="id" :columns="emailColumns" :dataSource="emailData" :pagination=false
                   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        >
          <template slot="sendssl" slot-scope="text">
            <ta-tag v-if="text == '1'" color="blue" class='no-cursor'>SSL</ta-tag>
            <ta-tag v-else color="green" class='no-cursor'>TLS</ta-tag>
          </template>
          <template slot="defaultemail" slot-scope="text">
            <ta-tag v-if="text == '1'" color="blue" class='no-cursor'>是</ta-tag>
            <ta-tag v-else color="green" class='no-cursor'>否</ta-tag>
          </template>
          <template slot="action" slot-scope="text, record">
            <a @click="fnEditEmail(record)" class="operate">编辑</a>
            <ta-divider type="vertical"/>
            <ta-popconfirm title="确定删除该邮箱吗?" okText="确定" cancelText="取消"
                           @confirm="() => fnDeleteEmail(record)">
              <a class="operate">删除</a>
            </ta-popconfirm>
          </template>
          <template slot="PWD" slot-scope="text, record" :visible="false">
          </template>
        </ta-table>
        <ta-pagination style="float: right; margin-top: 10px;"
                       showSizeChanger showQuickJumper
                       :dataSource.sync="emailData"
                       :defaultPageSize="5"
                       :params="emailPageParams"
                       :url="emailSearchUrl"
                       ref="gridPager"
        />

      </div>
    </ta-border-layout>
    <!--编辑、新增框-->
    <add-or-edit-email :visible="editVisible" @close="editVisible = false" :editType="editType" :rowData="rowData"  @editSuccess="editSuccess"  @queryEmail="fnQuery">
    </add-or-edit-email>
  </div>
</template>

<script>
import addOrEditEmail from './part/addOrEditEmail'
import $api from './api/index'

const formItemLayout = {
  labelCol: {span: 5},
  wrapperCol: {span: 19}
}
const emailColumns = [
  // {title: '', dataIndex: 'id', key: 'id', width: '0%', scopedSlots: {customRender: 'ID'}, overflowTooltip: false},
  {title: '邮箱账号', dataIndex: 'emailaddress', key: 'emailaddress', width: '25%', overflowTooltip: false},
  {title: '', dataIndex: 'password', key: 'password', scopedSlots: {customRender: 'PWD'}, overflowTooltip: false},
  {title: '发送主机ip', dataIndex: 'sendhost', key: 'sendhost', width: '20%', overflowTooltip: false},
  {title: '发送端口', dataIndex: 'sendport', key: 'sendport', width: '15%', overflowTooltip: false},
  {title: '发送协议', dataIndex: 'sendssl', key: 'sendssl', width: '15%', scopedSlots: {customRender: 'sendssl'}, overflowTooltip: false},
  {title: '默认邮箱', dataIndex: 'defaultemail', key: 'defaultemail', width: '10%', scopedSlots: {customRender: 'defaultemail'}, overflowTooltip: false},
  {title: '操作', dataIndex: 'operation', key: 'operation', scopedSlots: {customRender: 'action'}, width: '25%', overflowTooltip: false}
]
export default {
  name: 'emailMg',
  components: {addOrEditEmail},
  data () {
    return {
      formItemLayout,
      searchInfo: '', // 搜索查询字段
      emailColumns,
      emailData: [],
      emailSearchUrl: '/msgEmail/msgEmailRestService/selectMsgEmail',
      emailFormData: {},
      editVisible: false,
      editType: '',
      rowData: {},
      editIndex: '',
      areaOptions: [],
      selectedRowKeys: [], // 表格选择的数据
      selectedRows: [] // 表格选择的数据
    }
  },
  created () {
  },
  mounted () {
    // this.fnQuery()
    this.loadData()
  },
  methods: {
    emailPageParams () {
      let param = {}
      if (this.searchInfo != '') {
        param.emailaddress = this.searchInfo
      }
      return param
    },
    loadData: function () {
      this.$refs.gridPager.loadData((data) => {
      })
    },

    //  查询数据，用于初始化和刷新页面
    // fnQuery () {
    //   $api.queryAllEmail(this, null, {
    //     successCallback: (data) => {
    //       this.emailData = data.data.msgemail
    //     }
    //   })
    // },
    // 根据条件查询数据
    // queryEmail () {
    //   $api.queryAllEmail(this, {emailaddress: this.searchInfo}, {
    //     successCallback: (data) => {
    //       this.emailData = data.data.msgemail
    //     }
    //   })
    // },
    // 编辑电子邮箱
    fnEditEmail (record) {
      if (record) {
        this.rowData = record
        this.editType = '2'
      } else {
        this.rowData = {}
        this.editType = '1'
      }
      this.editVisible = true
    },
    // table的勾选框状态改变事件
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    // 批量删除
    fnToDeleteEmail () {
      if (this.selectedRowKeys.length === 0) {
        this.$message.warning('请先选择数据')
        return
      }
      this.$confirm({
        title: '删除邮箱',
        content: '确认删除这些邮箱吗?',
        cancelText: '取消',
        okText: '确认',
        onOk: () => {
          $api.deleteEmail(this, {emailId: this.selectedRowKeys.join(',')}, (data) => {
            this.$message.success('批量删除成功')
            for (let i = 0; i < this.selectedRows.length; i++) {
              this.emailData = this.emailData.filter((email) => {
                return email.id !== this.selectedRows[i].id
              })
            }
            this.loadData()
          })
        }
      })
    },
    // 删除单条数据
    fnDeleteEmail (record) {
      $api.deleteEmail(this, { emailId: record.id }, (data) => {
        this.$message.success('删除成功')
        this.emailData = this.emailData.filter((email) => {
          return email.id !== record.id
        })
        this.loadData()
      })
    },
    // 新增，编辑成功后调用来刷新数据
    editSuccess () {
      this.loadData()
    }
  }
}
</script>

<style scoped type="text/scss" lang="scss">
  .search-box {width: 340px; margin-right: 10px; line-height: 46px; }
</style>
